<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spire - 基于 Cangjie 语言的 .NET 开源组织</title>
    <style>
        :root {
            --primary-color: #7c4dff; /* 更亮的紫色，在深色背景下更显眼 */
            --primary-dark: #512bd4;
            --secondary-color: #9575cd;
            --accent-color: #22a6b3;
            --dark-color: #121212; /* 深色背景 */
            --darker-color: #0a0a0a; /* 更深的背景 */
            --card-color: #1e1e1e; /* 卡片背景 */
            --text-color: #e0e0e0; /* 主文本颜色 */
            --text-light: #b0b0b0; /* 次要文本颜色 */
            --text-lighter: #888; /* 最浅文本 */
            --border-color: #333; /* 边框颜色 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--dark-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏 */
        header {
            background-color: var(--darker-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--border-color);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
            text-decoration: none;
        }

        .logo img {
            height: 30px;
            margin-right: 10px;
            filter: brightness(1.2);
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links .active {
            color: var(--primary-color);
            font-weight: 600;
        }

        /* 英雄区域 */
        .hero {
            background: linear-gradient(135deg, var(--primary-dark), var(--darker-color));
            color: var(--text-color);
            padding: 80px 0;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            font-weight: 600;
            color: white;
        }

        .hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 30px;
            opacity: 0.9;
            color: var(--text-light);
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 4px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3);
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }

        .btn-secondary:hover {
            background-color: rgba(124, 77, 255, 0.1);
            transform: translateY(-2px);
        }

        /* 特性区域 */
        .features {
            padding: 80px 0;
            background-color: var(--darker-color);
            border-bottom: 1px solid var(--border-color);
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 2.2rem;
            color: white;
            margin-bottom: 15px;
        }

        .section-title p {
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .feature-card {
            background-color: var(--card-color);
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid var(--border-color);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            border-color: var(--primary-color);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: white;
        }

        .feature-card p {
            color: var(--text-light);
            line-height: 1.7;
        }

        /* 项目展示 */
        .projects {
            padding: 80px 0;
            background-color: var(--dark-color);
            border-bottom: 1px solid var(--border-color);
        }

        .project-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }

        .project-table th {
            background-color: var(--primary-dark);
            color: white;
            padding: 15px;
            text-align: left;
        }

        .project-table td {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
        }

        .project-table tr:last-child td {
            border-bottom: none;
        }

        .project-table tr:hover {
            background-color: rgba(124, 77, 255, 0.05);
        }

        .project-link {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .project-link:hover {
            text-decoration: underline;
        }

        .project-link::after {
            content: "→";
            margin-left: 5px;
            transition: transform 0.3s;
        }

        .project-link:hover::after {
            transform: translateX(3px);
        }

        /* 参与方式 */
        .get-involved {
            padding: 80px 0;
            background-color: var(--darker-color);
            border-bottom: 1px solid var(--border-color);
        }

        .involvement-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .option-card {
            background-color: var(--card-color);
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            transition: all 0.3s;
        }

        .option-card:hover {
            border-color: var(--primary-color);
        }

        .option-card h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: white;
        }

        .option-card p {
            color: var(--text-light);
            margin-bottom: 20px;
            line-height: 1.7;
        }

        .option-link {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .option-link::after {
            content: "→";
            margin-left: 5px;
            transition: transform 0.3s;
        }

        .option-link:hover::after {
            transform: translateX(3px);
        }

        /* 页脚 */
        footer {
            background-color: var(--card-color);
            color: var(--text-color);
            padding: 60px 0 20px;
            border-top: 1px solid var(--border-color);
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: white;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: var(--primary-color);
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            color: var(--text-lighter);
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero h1 {
                font-size: 2.2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 300px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <nav>
                <a href="#" class="logo">
                    <img src="./imgs/soul.png" alt="spire Logo">
                    spire
                </a>
                <ul class="nav-links">
                    <li><a href="#about" class="active">关于</a></li>
                    <li><a href="#tech">技术栈</a></li>
                    <li><a href="#projects">项目</a></li>
                    <li><a href="#join">参与</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <h1>使用 Cangjie 语言和.NET技术构建现代化 Cangjie 应用</h1>
            <p>spire 是一个开源组织，专注于使用 Cangjie 语言开发 ASP.NET Core、AI、身份认证和云原生架构等现代化解决方案。</p>
            <div class="cta-buttons">
                <a href="https://gitcode.com/spire" class="btn btn-primary">加入我们</a>
                <a href="https://gitcode.com/spire" class="btn btn-secondary">查看项目</a>
            </div>
        </div>
    </section>

    <section id="about" class="features">
        <div class="container">
            <div class="section-title">
                <h2>关于 spire</h2>
                <p>我们致力于推动 .NET 生态与 Cangjie 语言的深度集成，打造高性能、可扩展、安全的现代化组件与框架。</p>
            </div>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">🧠</div>
                    <h3>Cangjie 语言</h3>
                    <p>专注于现代 .NET 编程语言的创新与发展，为开发者提供更高效、更安全的编程体验。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚙️</div>
                    <h3>开源精神</h3>
                    <p>我们相信开源的力量，所有项目均采用 MIT 许可证，欢迎社区贡献和协作开发。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌐</div>
                    <h3>社区驱动</h3>
                    <p>由全球开发者共同维护的项目，注重社区反馈，持续优化和改进我们的解决方案。</p>
                </div>
            </div>
        </div>
    </section>

    <section id="tech" class="features">
        <div class="container">
            <div class="section-title">
                <h2>我们的技术栈</h2>
                <p>结合前沿技术与 .NET 生态，构建现代化的开发工具和框架。</p>
            </div>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">🔧</div>
                    <h3>Cangjie 语言</h3>
                    <p>现代 .NET 编程语言，提供更简洁、更安全的语法和更强大的功能。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌐</div>
                    <h3>ASP.NET Core</h3>
                    <p>高性能 Web 应用基础框架，支持构建现代化、可扩展的 Web 应用和服务。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔐</div>
                    <h3>安全认证</h3>
                    <p>OIDC / OAuth2.0 安全身份认证体系，保护您的应用和数据安全。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🤖</div>
                    <h3>人工智能</h3>
                    <p>ML.NET、OpenAI 等智能技术集成，为应用添加智能功能。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">☁️</div>
                    <h3>云原生</h3>
                    <p>Kubernetes、Azure 和微服务架构支持，构建可扩展的云应用。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🚀</div>
                    <h3>高性能</h3>
                    <p>优化的算法和数据结构，确保应用的高性能和低延迟。</p>
                </div>
            </div>
        </div>
    </section>

    <section id="projects" class="projects">
        <div class="container">
            <div class="section-title">
                <h2>开源项目</h2>
                <p>我们维护的一系列高质量开源项目，助力您的开发工作。</p>
            </div>
            <table class="project-table">
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>描述</th>
                        <th>链接</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>spire_net_http</strong></td>
                        <td>支持 AOP 的 HttpClient</td>
                        <td><a href="https://gitcode.com/spire/spire_net_http" class="project-link">查看</a></td>
                    </tr>
                    <tr>
                        <td><strong>spire_web</strong></td>
                        <td>ASP 项目构建指南和最佳实践</td>
                        <td><a href="https://gitcode.com/spire/spire_web" class="project-link">查看</a></td>
                    </tr>     
                    <tr>
                        <td><strong>spire_extensions_hosting</strong></td>
                        <td>通用主机框架，用于处理后台任务</td>
                        <td><a href="https://gitcode.com/spire/spire_extensions_hosting" class="project-link">查看</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section id="join" class="get-involved">
        <div class="container">
            <div class="section-title">
                <h2>参与贡献</h2>
                <p>加入我们的社区，共同打造更好的 .NET 开发生态。</p>
            </div>
            <div class="involvement-options">
                <div class="option-card">
                    <h3>提交代码</h3>
                    <p>通过提交 PR 来改进现有功能或添加新特性，您的代码将帮助整个社区。</p>
                    <a href="https://gitcode.com/spire" class="option-link">查看项目</a>
                </div>
                <div class="option-card">
                    <h3>编写扩展</h3>
                    <p>开发新的扩展模块，丰富 spire 生态系统。</p>
                    <a href="#contact" class="option-link">联系我们</a>
                </div>
                <div class="option-card">
                    <h3>报告问题</h3>
                    <p>提交 Issues 帮助我们发现问题并改进项目质量。</p>
                    <a href="https://gitcode.com/spire" class="option-link">提交 Issue</a>
                </div>
                <div class="option-card">
                    <h3>撰写文档</h3>
                    <p>完善文档和教程，帮助其他开发者更快上手。</p>
                    <a href="https://gitcode.com/spire" class="option-link">贡献文档</a>
                </div>
            </div>
            <div style="text-align: center; margin-top: 40px;">
                <a href="https://gitcode.com/invite/link/25a262562c76483ba68f" target="_blank" class="btn btn-primary" style="padding: 12px 30px;">立即加入 spire</a>
            </div>
        </div>
    </section>

    <section id="contact" class="features" style="padding-bottom: 60px;">
        <div class="container">
            <div class="section-title">
                <h2>联系我们</h2>
                <p>有任何问题或建议？欢迎通过以下方式与我们联系。</p>
            </div>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">🔗</div>
                    <h3>GitCode 主页</h3>
                    <p>访问我们的 GitCode 主页，查看所有开源项目。</p>
                    <a href="https://gitcode.com/spire" class="option-link">https://gitcode.com/spire</a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💬</div>
                    <h3>社区交流</h3>
                    <p>加入我们的交流群，与开发者直接沟通。</p>
                    <p>QQ群: 307564339</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📬</div>
                    <h3>提交项目</h3>
                    <p>欢迎提交您的 Cangjie 扩展或 .NET 模块，我们会积极配合！</p>
                    <a href="https://gitcode.com/spire" class="option-link">提交项目</a>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>spire</h3>
                    <ul class="footer-links">
                        <li><a href="#about">关于我们</a></li>
                        <li><a href="#tech">技术栈</a></li>
                        <li><a href="#projects">开源项目</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>参与贡献</h3>
                    <ul class="footer-links">
                        <li><a href="#join">如何参与</a></li>
                        <li><a href="https://gitcode.com/spire">GitCode 主页</a></li>
                        <li><a href="#contact">社区交流</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>资源</h3>
                    <ul class="footer-links">
                        <li><a href="#">文档</a></li>
                        <li><a href="#">博客</a></li>
                        <li><a href="#">示例代码</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>法律</h3>
                    <ul class="footer-links">
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                        <li><a href="#">许可证 (MIT)</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 spire 开源组织. 保留所有权利.</p>
                <p style="margin-top: 10px;">本页面由 AI 生成 · 内容仍在不断完善中</p>
            </div>
        </div>
    </footer>
</body>

</html>